<script setup>
import * as echarts from 'echarts';
import { onMounted,watch } from 'vue';
import axios from "axios";
import mitt from "mitt";
import emitter from "./mitt.ts";
let prop = defineProps({
  year: String
})

let minScore = 150;
let maxScore = 0;


let option;
let myChart;

onMounted(() => {
  axios.get('http://127.0.0.1:5000/m/'+prop.year).then((res) => {
    let data = res.data;
    data.label.forEach((item) => {
      if (Number(item) > maxScore) {
        maxScore = Number(item);
      }
      if (Number(item) < minScore) {
        minScore = Number(item);
      }
    })
    console.log(maxScore,minScore)

    myChart = echarts.init(
        document.getElementById('CT'), 'westeros', {renderer: 'canvas'});
    option = {
      "animation": true,
      "animationThreshold": 2000,
      "animationDuration": 1000,
      "animationEasing": "cubicOut",
      "animationDelay": 0,
      "animationDurationUpdate": 300,
      "animationEasingUpdate": "cubicOut",
      "animationDelayUpdate": 0,
      "aria": {
        "enabled": false
      },
      "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
      ],
      "series": [
        {
          "type": "line",
          "connectNulls": false,
          "xAxisIndex": 0,
          "symbolSize": 4,
          "showSymbol": true,
          "smooth": false,
          "clip": true,
          "step": false,
          "data": data.data,
          "hoverAnimation": true,
          "label": {
            "show": false,
            "margin": 8
          },
          "logBase": 10,
          "seriesLayoutBy": "column",
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          },
          "areaStyle": {
            "opacity": 0
          },
          "zlevel": 0,
          "z": 0,
          "rippleEffect": {
            "show": true,
            "brushType": "stroke",
            "scale": 2.5,
            "period": 4
          },
          markLine: {
            data: [
              {
                xAxis: data.line.b-150, // 在 'C' 类别的位置添加垂直标线
                name: '本科线', // 标注线的名称
                label: {  // 文字标签
                  // show: false
                  formatter: '本科线('+data.line.b+')',
                  fontSize: '16px',
                }
              },
              {
                xAxis: data.line.t-150, // 在 'C' 类别的位置添加垂直标线
                name: '特招线', // 标注线的名称
                label: {  // 文字标签
                  // show: false
                  formatter: '特招线('+data.line.t+')',
                  fontSize: '16px',
                }
              }
            ]
          }
        },
      ],
      "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
          "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
          "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
      },
      "xAxis": [
        {
          "show": true,
          "scale": false,
          "nameLocation": "end",
          "nameGap": 15,
          "gridIndex": 0,
          "inverse": false,
          "offset": 0,
          "splitNumber": 5,
          "minInterval": 0,
          "splitLine": {
            "show": true,
            "lineStyle": {
              "show": true,
              "width": 1,
              "opacity": 1,
              "curveness": 0,
              "type": "solid"
            }
          },
          "data": data.label
        }
      ],
      "yAxis": [
        {
          "show": true,
          "scale": false,
          "nameLocation": "end",
          "nameGap": 15,
          "gridIndex": 0,
          "inverse": false,
          "offset": 0,
          "splitNumber": 5,
          "minInterval": 0,
          "splitLine": {
            "show": true,
            "lineStyle": {
              "show": true,
              "width": 1,
              "opacity": 1,
              "curveness": 0,
              "type": "solid"
            }
          }
        }
      ],
      "title": [
        {
          "show": false,
          "text": "\u4e00\u5206\u4e00\u6bb5\u8868",
          "target": "blank",
          "subtarget": "blank",
          "padding": 5,
          "itemGap": 10,
          "textAlign": "auto",
          "textVerticalAlign": "auto",
          "triggerEvent": false,
          "left": "center"
        }
      ],
      "dataZoom": {
        "show": true,
        "type": "slider",
        "showDetail": true,
        "showDataShadow": true,
        "realtime": true,
        "start": 0,
        "end": 100,
        "orient": "horizontal",
        "zoomLock": false,
        "filterMode": "filter"
      }
    };
    myChart.setOption(option);
    myChart.on("datazoom", function (params) {


      let start = params.start/100
      let end = params.end/100
      let numStart = Math.round(start*(maxScore-minScore)+minScore)
      let numEnd = Math.round(end*(maxScore-minScore)+minScore)

      emitter.emit("change", {start:numStart, end:numEnd})

    })
  })
})

watch(prop , (newVal, oldVal) => {
  if (Number(newVal.year) <= 24){
    axios.get("http://127.0.0.1:5000/m/"+newVal.year).then((res) => {
      option.series[0].data = res.data.data
      option.xAxis[0].data = res.data.label
      option.series[0].markLine.data[0].xAxis = res.data.line.b-150
      option.series[0].markLine.data[1].xAxis = res.data.line.t-150
      option.series[0].markLine.data[0].label.formatter = '本科线('+res.data.line.b+')'
      option.series[0].markLine.data[1].label.formatter = '特招线('+res.data.line.t+')'
      myChart.setOption(option);
    })
  }else {
    alert("没有数据")
  }
})



</script>

<template>
<div id="CT"></div>
</template>

<style scoped>
#CT{
  width: 100%;
  height: 100%;
}
</style>